<template>
	<div class="main">
		<div class="head-wrap flex-jsb">
			<div class="flex">
				<el-form :model="form" :inline="true" ref="form" label-width="100px" class="form">
					<el-form-item label="系统模块：" prop="system">
						<el-input size="mini" clearable v-model="form.system" placeholder="请输入系统模块"></el-input>
					</el-form-item>

					<el-form-item label="操作类型：" prop="type">
						<el-select size="mini" v-model="form.type" placeholder="请选择操作类型">
							<el-option :label="item.label" :value="item.value" v-for="item in selecData" />
						</el-select>
					</el-form-item>
					<el-form-item label="操作时间：">
						<el-date-picker v-model="date" @change="change" type="datetimerange"
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
				</el-form>
			</div>
			<div>
				<el-button size="mini" @click="handleRset">重置</el-button>
				<el-button size="mini" type="primary" @click="handleSelect">查询</el-button>
				<!-- <el-button size="mini" type="primary" @click="handleSelect">收起</el-button> -->
			</div>
		</div>
		<div class="bottom-wrap mt15">
			<div class="flex-jsb mt15">
				<div></div>
				<el-button v-hasPerm="['exportLog']" size="mini" @click="exportLogExcel">导出</el-button>
			</div>
			<div class="table-wrap mt15">
				<el-table :data="logList" ref="multipleTable" height="570" style="width: 100%"
					:cell-style="{ color: '#333' }" class="table">
					<el-table-column type="selection" width="55" />
					<el-table-column prop="system" label="系统模块" width="250" />
					<el-table-column prop="type" label="操作类型" />
					<el-table-column prop="ip" label="IP地址" />
					<el-table-column prop="operateDesc" label="操作信息" />
					<el-table-column prop="createUser" label="操作人" width="150" />
					<el-table-column prop="createTime" label="操作时间" width="250">
						<template slot-scope="scope">
							<div>{{ formatDate(scope.row.createTime) }}</div>
						</template>
					</el-table-column>
				</el-table>
				<div class="flex-jsb">
					<div></div>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page.sync="form.start" :page-sizes="[10, 20, 30, 40]" :page-size="form.limit"
						layout="total, sizes, prev, pager, next, jumper" :total="total"
						class="ml25 mt15 systemPagination el-pagination">
					</el-pagination>
				</div>
			</div>
		</div>

	</div>
</template>
<script>
import { getLogList } from "@/api/alarm-logsApi.js";
import utils from "@/utils/date.js"

export default {
	data() {
		return {
			selecData: [
				{ value: '增加', label: "增加" },
				{ value: '修改', label: "修改" },
				{ value: '删除', label: "删除" },
				{ value: '查询', label: "查询" },
			],
			form: {
				system: "",
				type: "",
				startTime: "",
				endTime: "",
				limit: 10,
				start: 1
			},
			logList: [],
			date: "",
			showData: [],
			total: 0,
		}
	},
	mounted() {
		this.getLogList({ ...this.form, start: this.form.start - 1 });
	},
	methods: {
		getLogList(data) {
			getLogList(data).then(res => {
				if (res.code = "200") {
					this.logList = res.info;
					this.total = res.totalCount;
				}
			})
		},
		handleSizeChange(val) {
			this.form.limit = val;
			this.form.start = 1;
			this.getLogList({ ...this.form, start: 0 });

		},

		handleCurrentChange(val) {
			this.form.start = val;
			this.getLogList({ ...this.form, start: this.form.start - 1 });
		},
		exportLogExcel() {

			let selectData = this.$refs.multipleTable.selection

			if (selectData.length == 0) {
				this.message("请先选择需要导出的数据", 3)
				return
			}
			let ids = "";
			selectData.map((item) => {
				ids += item.id + ","
			});
			window.open('/jypw/Alarm/exportLogExcel?ids=' + ids, '_blank');
			// console.log(ids) ;
			// const a = document.createElement("a");
			// document.body.appendChild(a);
			// a.style.display = "none";
			// a.href = process.env.VUE_APP_BASE_API + '/Alarm/exportLogExcel?ids=' + ids;
			// a.download = `操作日志.xls`;
			// a.click();
		},

		formatDate(date) {
			return utils.formatter(date, "yyyy-MM-dd hh:mm:ss")
		},
		handleRset() {
			this.$refs.form.resetFields();
			this.date = "";
			this.form.startTime = "";
			this.form.endTime = ""
			this.getLogList({ ...this.form, start: 0 })
		},
		handleSelect() {
			this.getLogList({ ...this.form, start: 0 });
		},
		change(date) {
			if (date.length) {
				this.form.startTime = date[0];
				this.form.endTime = date[1]
			}
			console.log(date);
		}
	},
}
</script>
<style lang="scss" scoped>
.main {
	width: 100%;
	height: 100%;
	overflow: auto;
	margin: 0 auto;

	.head-wrap {
		padding: 20px 17px;
		border-radius: 6px;

		/deep/ .el-form-item {
			margin-bottom: 0;

			.el-form-item__label {
				color: #000;
			}
		}
	}

	.head-wrap,
	.bottom-wrap {
		background: #FFFFFF;
		box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
	}

	.bottom-wrap {
		padding: 0 15px;
		border-radius: 10px;
		height: 89%;
		overflow: hidden;

		.table-wrap {
			height: 100%;
			overflow: auto;
			color: #333;

			.table {
				border: 1px solid #F0F0F0;
				border-radius: 0px 0px 6px 6px;
				overflow: hidden;
			}


			/deep/ .el-table__header tr,
			/deep/ .el-table__header th {
				background-color: var(--system-table-header-bgc) !important;
				color: #333;
				font-weight: 400;
			}

			.state {
				width: 8px;
				height: 8px;
				border-radius: 50%;
				margin-right: 5px;
			}

			.state1 {
				background: #FF9000;
			}

			.state2 {
				background: #21B795;
			}
		}
	}

}

.flex-ac {
	display: flex;
	align-items: center;
}

.mt15 {
	margin-top: 15px;
}

.flex {
	display: flex;
}

.flex-jsb {
	display: flex;
	justify-content: space-between;
}



.mt25 {
	margin-top: 25px;
}

.ml25 {
	margin-left: 25px;
}
</style>
